<template>
  <el-dialog
    :model-value="showPreviewDialog"
    title="预览"
    width="500"
    @close="closeDialog"
    :close-on-click-modal="false"
  >
    <div class="content">
      <div class="phone-preview">
        <div
          class="phone-header"
          :style="{ backgroundColor: previewData.pageForm.navBarBackground }"
          v-if="previewData.pageForm.navType === 1"
        ></div>
        <div
          class="phone-page-title"
          :style="{ backgroundColor: previewData.pageForm.navBarBackground }"
          v-if="previewData.pageForm.navType === 1"
        >
          <div class="page-title">{{ previewData.pageForm.pageName }}</div>
          <div class="capsule"></div>
        </div>
        <div class="component-content" :style="backgroundStyle">
          <div class="phone-header" v-if="previewData.pageForm.navType === 2"></div>
          <div class="capsule" v-if="previewData.pageForm.navType === 2"></div>

          <div class="component-item" v-for="item in previewData.showComponentList" :key="item.id">
            <component
              :is="componentMap[item.type]"
              :component-data="item"
              :component-type="1"
            ></component>
          </div>
        </div>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closeDialog">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
  import CarouselSetting from './CarouselComponent/CarouselSetting.vue'
  import CategoryNavSetting from './CategoryNavComponent/CategoryNavSetting.vue'
  import GoodsSetting from './GoodsCardComponent/GoodsSetting.vue'
  import InfoSetting from './InfoComponent/InfoSetting.vue'
  import InfoCardSetting from './InfoCardComponent/InfoCardSetting.vue'
  import CategoryGoodsSetting from './CategoryGoodsComponent/CategoryGoodsSetting.vue'
  import NoticeSetting from './NoticeComponent/NoticeSetting.vue'
  import VideoPlaySetting from './VideoPlayComponent/VideoPlaySetting.vue'
  import CouponCardSetting from './CouponCardComponent/CouponCardSetting.vue'
  import QuestionCardSetting from './QuestonLayoutComponent/QuestionSetting.vue'
  import ImgSetting from './ImageComponent/ImageSetting.vue'
  import TitleSetting from './TitleComponent/TitleSetting.vue'
  import DividerSetting from './DividerComponent/DividerSetting.vue'
  import NavLinkSetting from './NavLInkComponent/NavLinkSetting.vue'
  import CubeSetting from './CubeComponent/CubeSetting.vue'
  import EmptyAreaSetting from './EmptyAreaComponent/EmptyAreaSetting.vue'
  import GoodsFlashSetting from './GoodsFlashComponent/GoodsFlashSetting.vue'
  import VideoCourseSetting from './VideoCourseComponent/VideoCourseSetting.vue'
  import VideoSingleCourseSetting from './VideoSingleCourseComponent/VideoSingleCourseSetting.vue'
  import MemberCenterSetting from './MemberCenterComponent/MemberCenterSetting.vue'
  import CarModelChangeSetting from './CarModelChangeComponent/CarModelChangeSetting.vue'
  import CategoryStatisticsSetting from './CategoryStatisticsComponent/CategoryStatisticsSetting.vue'
  import ArticleSetting from './ArticleComponent/ArticleSetting.vue'
  import AddDesktopSetting from './AddDesktopComponent/AddDesktopSetting.vue'

  const componentMap: Record<string, Component> = {
    carousel: CarouselSetting,
    category_nav: CategoryNavSetting,
    goods: GoodsSetting,
    info: InfoSetting,
    info_card: InfoCardSetting,
    category_goods: CategoryGoodsSetting,
    notice: NoticeSetting,
    video_play: VideoPlaySetting,
    coupon: CouponCardSetting,
    question: QuestionCardSetting,
    img: ImgSetting,
    nav_title: TitleSetting,
    divider: DividerSetting,
    nav_link: NavLinkSetting,
    cube: CubeSetting,
    empty_area: EmptyAreaSetting,
    goods_flash: GoodsFlashSetting,
    video_course: VideoCourseSetting,
    video_course_single: VideoSingleCourseSetting,
    member_info: MemberCenterSetting,
    car_info: CarModelChangeSetting,
    category_info: CategoryStatisticsSetting,
    article: ArticleSetting,
    add_desktop: AddDesktopSetting
  }

  const props = defineProps({
    showPreviewDialog: {
      type: Boolean,
      default: false
    },
    previewData: {
      type: Object,
      default: () => {}
    }
  })

  const backgroundStyle = computed(() => {
    if (props.previewData.pageForm.bgType === 2) {
      return {
        backgroundImage: `url(${props.previewData.pageForm.bgImageUrl})`,
        width: '100%',
        backgroundSize: 'contain',
        backgroundRepeat: 'no-repeat'
        // height: '100vh'
      }
    } else {
      return {
        backgroundColor: props.previewData.pageForm.bgColor
      }
    }
  })

  const emit = defineEmits(['closeDialog'])

  function closeDialog() {
    emit('closeDialog')
  }
</script>

<style scoped lang="scss">
  .content {
    width: 100%;
    overflow-y: auto;
  }

  .phone-preview {
    width: 375px;
    height: 667px;
    background-color: #fff;
    margin: 0 auto;

    .phone-header {
      position: relative;
      background-image: url(https://image.lutongjiakao.com/system/354d97034af84a0a9817ad0191d879d8.png);
      background-repeat: no-repeat;
      background-size: cover;
      width: 100%;
      height: 44px;
    }

    .phone-page-title {
      width: 100%;
      height: 50px;
      line-height: 50px;
      box-sizing: border-box;
      position: relative;

      .page-title {
        font-weight: bold;
        color: black;
        position: absolute;
        top: 0;
        left: 150px;
      }

      .capsule {
        background-image: url(https://image.lutongjiakao.com/system/45557340b294468cb107823bdd1891b7.png);
        background-repeat: no-repeat;
        background-size: cover;
        width: 87px;
        height: 32px;
        position: absolute;
        top: 9px;
        right: 0;
        z-index: 9;
      }
    }

    .component-item {
      position: relative;
      z-index: 2;

      .active-component {
        //padding: 6px;
        border: 2px solid var(--el-color-primary);
      }

      .component-operation {
        position: absolute;
        top: 0;
        right: -42px;
        width: 36px;
        height: 100px;
        background-color: #fff;
        box-shadow: 0 3px 3px #ccc;
        border-radius: 6px;

        .icon-list {
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;

          .el-icon {
            font-size: 20px;
            flex: 1;
            cursor: pointer;

            &:not(:last-child) {
              border-bottom: 1px solid #ccc;
            }
          }
        }
      }
    }
  }
</style>
